<!-- 运费管理 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <el-card style="margin:20px">
      <el-button
        type="danger"
        style="margin:20px"
        @click="addCarriages"
      >新增模板</el-button>
      <el-table :data="tableData">
        <el-table-column
          prop="templateType"
          label="模板类型"
        >
          <template v-slot="{ row }">
            <!-- <span v-if="row.templateType===1"></span> -->
            {{ transtemplateType(row.templateType) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="transportType"
          label="运送类型"
        >
          <template v-slot="{ row }">
            {{ transtransportType(row.transportType) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="associatedCityList"
          label="关联城市"
        >
          <template v-slot="{ row }">
            <!-- {{ row }} -->
            <!-- {{ transassociatedCityList(row.associatedCityList) }} -->
            <span v-if="row.associatedCityList.includes('1')">全国</span>
            <span v-if="row.associatedCityList.includes('2')">京津冀</span>
            <span v-if="row.associatedCityList.includes('3')">江浙沪</span>
            <span v-if="row.associatedCityList.includes('4')">川渝</span>
            <span v-if="row.associatedCityList.includes('5')">黑吉辽</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="firstWeight"
          label="首重"
        ></el-table-column>
        <el-table-column
          prop="continuousWeight"
          label="续重"
        ></el-table-column>
        <el-table-column
          prop="lightThrowingCoefficient"
          label="轻抛系数"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template v-slot="{ row }">
            <el-button
              type="text"
              size="mini"
              @click="edit(row, row.id)"
            >编辑</el-button>
            <span style="padding:5px">|</span>

            <el-popconfirm
              title="您确定要删除这一条内容吗"
              @onConfirm="del(row.id)"
            >
              <el-button
                slot="reference"
                type="text"
                style="color:red"
                size="mini"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <freightAdd
      ref="freightAdd"
      :show-dialog="showDialog"
      :edit-id="editId"
      @closeDialog="closeDialog"
    ></freightAdd>
  </div>
</template>

<script>
import { freightManageList, freightManageDelete } from '@/api/transit'
// 引入添加/编辑的组件
import freightAdd from './components/freight-add.vue'
export default {
  components: {
    freightAdd
  },
  data() {
    return {
      tableData: [],
      // 控制弹窗的显示与隐藏
      showDialog: false,
      // 判断添加/编辑的id
      editId: ''
    }
  },
  created() {
    this.getfreightManageList()
  },
  methods: {
    async getfreightManageList() {
      const rs = await freightManageList()
      // console.log('运费', rs)
      this.tableData = rs.data
    },
    // 转换模板类型的数据
    transtemplateType(value) {
      if (value === 1) {
        return '同城寄'
      } else if (value === 2) {
        return '省内寄'
      } else if (value === 3) {
        return '经济区互寄'
      } else {
        return '跨省'
      }
    },
    // 转换运送类型
    transtransportType(value) {
      if (value === 1) {
        return '普快'
      } else {
        return '特快'
      }
    },
    // 点击新增的按钮
    addCarriages() {
      this.showDialog = true
      this.editId = ''
    },
    closeDialog(value) {
      // console.log(value)
      this.showDialog = value
      this.getfreightManageList()
    },
    // 删除的操作
    async del(id) {
      await freightManageDelete(id)
      // 提示
      this.$message.success('删除成功')
      // 重新渲染
      this.getfreightManageList()
    },
    // 操作的功能
    edit(row, id) {
      // 打开弹窗
      // console.log(row)
      this.showDialog = true
      this.editId = id
      // // 调用子组件中的数据
      this.$refs.freightAdd.freightManageList(row)
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.waybill-list {
  .el-dialog__wrapper {
    /deep/ .el-dialog__body {
      padding-left: 0px;
    }
  }
}
.box {
  padding: 30px;
}
.count {
  padding: 20px;
  background: #fff;
}
.pageBox {
  margin-top: 20px;
  text-align: right;
}
</style>
